<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Metorik - Responsive Bootstrap 4 Admin Dashboard Template</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="../src/images/favicon.ico"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../src/css/bootstrap.min.css">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="../src/css/typography.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="../src/css/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="../src/css/responsive.css">
</head>
<body>
<!-- loader Start -->
<div id="loading">

</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
    <!-- Sidebar  -->
    <div class="iq-sidebar">
        <div class="iq-sidebar-logo d-flex justify-content-between">
            <a href="index.html">
                <img src="../src/images/logo.gif" class="img-fluid" alt="">
                <span>DaLao</span>
            </a>
            <div class="iq-menu-bt align-self-center">
                <div class="wrapper-menu">
                    <div class="line-menu half start"></div>
                    <div class="line-menu"></div>
                    <div class="line-menu half end"></div>
                </div>
            </div>
        </div>
        <div id="sidebar-scrollbar">
            <div id="menu"></div>
            <div class="p-3"></div>
        </div>
    </div>
    <!-- TOP Nav Bar -->
    <div class="iq-top-navbar">
        <div class="iq-navbar-custom">
            <div class="iq-sidebar-logo">
                <div class="top-logo">
                    <a href="index.html" class="logo">
                        <img src="../src/images/logo.gif" class="img-fluid" alt="">
                        <span>DaLao</span>
                    </a>
                </div>
            </div>
            <div class="navbar-breadcrumb">
                <h5 class="mb-0">发票</h5>
                <nav aria-label="breadcrumb">
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">主页</a></li>
                        <li class="breadcrumb-item active" aria-current="page">发票</li>
                    </ul>
                </nav>
            </div>
            <div id="navigation"></div>
        </div>
    </div>
    <!-- TOP Nav Bar END -->
    <!-- Page Content  -->
    <div id="content-page" class="content-page">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="iq-card">

                        <div class="iq-card-body">

                            <div class="row">
                                <div class="col-lg-6">
                                    <img src="../src/images/logo.gif" class="img-fluid w-25" alt="">
                                </div>
                                <div class="col-lg-6 align-self-center">
                                    <h4 class="mb-0 float-right">发票联</h4>
                                </div>
                                <div class="col-sm-12">
                                    <hr class="mt-3">
                                    <h5 class="mb-0">你好，尼克·琼斯</h5>
                                    <p>读者会被可读的东西分散注意力，这是一个长期存在的事实

                                        查看页面布局时页面的内容。使用Lorem Ipsum的目的是

                                        它有或多或少的字母正态分布，而不是使用

                                        “这里有内容，这里有内容”，使它看起来像可读的英语。</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="table-responsive-sm">
                                        <table class="table">
                                            <thead>
                                            <tr>
                                                <th scope="col">订货日期</th>
                                                <th scope="col">订单状态</th>
                                                <th scope="col">订单ID</th>
                                                <th scope="col">帐单地址</th>
                                                <th scope="col">装运地址</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>2020年1月17日</td>
                                                <td><span class="badge badge-danger">未付</span></td>
                                                <td>250028</td>
                                                <td>
                                                    <p class="mb-0">维多利亚州科林斯街西16122号邮政信箱8007

                                                        澳大利亚<br>
                                                        电话: +123 456 7890<br>
                                                        邮箱: <a href="/cdn-cgi/l/email-protection"
                                                               class="__cf_email__"
                                                               data-cfemail="89edece4e6c9c4ecfde6fbe0e2a7eae6e4">[email&#160;protected]</a><br>
                                                        网址: www.Metorik.com
                                                    </p>
                                                </td>
                                                <td>
                                                    <p class="mb-0">科林斯街西16122号邮政信箱<br>维多利亚8007

                                                        澳大利亚<br>
                                                        电话: +123 456 7890<br>
                                                        邮箱: <a href="/cdn-cgi/l/email-protection"
                                                               class="__cf_email__"
                                                               data-cfemail="f397969e9cb3be96879c819a98dd909c9e">[email&#160;protected]</a><br>
                                                        网址: www.Metorik.com
                                                    </p>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <h5>订单汇总</h5>
                                    <div class="table-responsive-sm">
                                        <table class="table table-striped">
                                            <thead>
                                            <tr>
                                                <th class="text-center" scope="col">#</th>
                                                <th scope="col">项目</th>
                                                <th class="text-center" scope="col">数量</th>
                                                <th class="text-center" scope="col">价格</th>
                                                <th class="text-center" scope="col">总计</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <th class="text-center" scope="row">1</th>
                                                <td>
                                                    <h6 class="mb-0">网页设计</h6>
                                                    <p class="mb-0">Lorem Ipsum只是印刷和
                                                        排版业。</p>
                                                </td>
                                                <td class="text-center">5</td>
                                                <td class="text-center">$120.00</td>
                                                <td class="text-center"><b>$2,880.00</b></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <h5 class="mt-5">订单详细信息</h5>
                                    <div class="table-responsive-sm">
                                        <table class="table table-striped">
                                            <thead>
                                            <tr>
                                                <th scope="col">银行</th>
                                                <th scope="col">账号</th>
                                                <th scope="col">到期日</th>
                                                <th scope="col">小计</th>
                                                <th scope="col">折扣</th>
                                                <th scope="col">总计</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <th scope="row">中国银行</th>
                                                <td>12333456789号</td>
                                                <td>2019年11月12日</td>
                                                <td>$&nbsp;4597.50</td>
                                                <td>10%</td>
                                                <td><b>$&nbsp;4137.75</b></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-sm-6"></div>
                                <div class="col-sm-6 text-right">
                                    <button type="button" class="btn btn-link mr-3" style="text-decoration: #ffffff"><i class="ri-printer-line"></i>下载打印
                                    </button>
                                    <button type="button" class="btn btn-primary">提交</button>
                                </div>
                                <div class="col-sm-12 mt-5">
                                    <b class="text-danger">笔记:</b>
                                    <p>读者会被可读的东西分散注意力，这是一个长期存在的事实
                                        查看页面布局时页面的内容。使用Lorem Ipsum的目的是
                                        它有或多或少的字母正态分布，而不是使用
                                        “这里有内容，这里有内容”，使它看起来像可读的英语。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Wrapper END -->
<div id="bottom"></div>
<!-- Footer END -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!--<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>-->
<script src="../src/js/jquery.min.js"></script>
<script src="../src/js/popper.min.js"></script>
<script src="../src/js/bootstrap.min.js"></script>
<!-- Appear JavaScript -->
<script src="../src/js/jquery.appear.js"></script>
<!-- Countdown JavaScript -->
<script src="../src/js/countdown.min.js"></script>
<!-- Counterup JavaScript -->
<script src="../src/js/waypoints.min.js"></script>
<script src="../src/js/jquery.counterup.min.js"></script>
<!-- Wow JavaScript -->
<script src="../src/js/wow.min.js"></script>
<!-- Apexcharts JavaScript -->
<script src="../src/js/apexcharts.js"></script>
<!-- Select2 JavaScript -->
<script src="../src/js/select2.min.js"></script>
<!-- Owl Carousel JavaScript -->
<script src="../src/js/owl.carousel.min.js"></script>
<!-- Magnific Popup JavaScript -->
<script src="../src/js/jquery.magnific-popup.min.js"></script>
<!-- Smooth Scrollbar JavaScript -->
<script src="../src/js/smooth-scrollbar.js"></script>
<!-- lottie JavaScript -->
<script src="../src/js/lottie.js"></script>
<!-- Chart Custom JavaScript -->
<script src="../src/js/chart-custom.js"></script>
<!-- Custom JavaScript -->
<script src="../src/js/custom.js"></script>
<script>
    $(function () {
        $("#menu").load("menus.html");
        $("#navigation").load("navigation-bar.html");
        $("#bottom").load("bottom-bar.html");
    });
</script>
</body>
</html>